<template>
  <div id="main">
    <div class="login">
      <div v-if="welcome" class="welcome">
      <!-- 在组件的click上有一个方法可以触发原生事件，添加修饰符 -->
      <van-circle
        v-model="currentTime"
        style="position: absolute; top: 10px; right: 10px;"
        size="56px"
        :rate="currentTime"
        v-on:click.native="closeWelcome"
        :text="`${time}s`"
      />
      <i class="icon" style="opacity:0.5;"></i>
      <!-- <span>{{ welText }}</span> -->
    </div>
    <div v-else id="inp">
      <img src="../../images/Octopus.jpeg" alt="" style="width : 100% ; height : 100% ;">
      <br />
      <input
        class="inp1"
        v-model="userName"
        type="text"
        placeholder="请输入账号"
      /><br />
      <input
        class="inp1"
        v-model="passWord"
        type="password"
        placeholder="请输入密码"
      />
      <van-checkbox class="checkb" v-model="remember" checked-color="#f5222d"
        >记住账号？</van-checkbox
      >
      <van-checkbox class="checkb" v-model="auto" checked-color="#f5222d"
        >7天免登录？</van-checkbox
      >
      <!-- <input type="text" placeholder="输入手机号">
            <button @click="getVdtCode">获取验证码</button> -->
      <button class="loginBtn" @click="loginEvt">登&emsp;&emsp;&emsp;录</button
      ><br />
      <span class="rgt" @click="$router.push('/register')">用户注册</span>
    </div>
    </div>
  </div>
</template>
<script>
//  import { getVdtCodeApi } from '../../apis/loginApi'
import MockService from "../../apis/Ajax";
export default {
  data() {
    return {
      welcome: true,

      remember: false,
      auto: false,
      userName: "",
      passWord: "",
      timer: null,
      time: 5,
      currentTime: 100,
      autoFlag: "login",
    };
  },


  async created() {
    // 欢迎页面需要一个倒计时 -- 一定要记得关闭
    this.timer = setInterval(() => {
      if (this.currentTime > 0) {
        this.currentTime -= 1;
        this.time = Math.ceil(this.currentTime / 20);
        // console.log('------------', this.currentTime)
        
      } else {
       clearInterval(this.timer)
         this.currentTime = 0;
      this.welcome = false;
      var yes = localStorage.getItem("auto-text")
    
        if (yes) {
            console.log(yes);
          this.$router.push("/home");
          sessionStorage.setItem('userName',this.userName)
          
        }else{
              var rem = localStorage.getItem("user-name")
             
            if(rem){
                this.userName=rem
            }
        }
 
      }
    }, 50);
  },
  methods: {
    async loginEvt() {
      let result = await MockService.checkUser(this.userName, this.passWord);
      console.log(result);
      if (result.code == 200) {
        //     if(this.remember){
             localStorage.setItem('userName', this.userName)
        // }else{
        //     localStorage.removeItem('userName')
        // }
        this.$router.push("/home");
        this.$store.commit("common/setToken", "token");
        if (this.auto) {
          localStorage.setItem("auto-text", this.userName);
        } else {
          localStorage.removeItem("auto-text");
        }
        if (this.remember) {
          localStorage.setItem("user-name", this.userName);
        } else {
          localStorage.removeItem("user-name");
        }
      }

      sessionStorage.setItem("userName", this.userName);
    },
    closeWelcome() {
      clearInterval(this.timer);
      // if(this.auto){
      //      this.$router.push('/home')
      // }
      this.currentTime = 0;
      this.welcome = false;
      var yes = localStorage.getItem("auto-text")
    
        if (yes) {
            console.log(yes);
          this.$router.push("/home");
          sessionStorage.setItem('userName',this.userName)
          
        }else{
              var rem = localStorage.getItem("user-name")
             
            if(rem){
                this.userName=rem
            }
        }
    },
  },
};
</script>
<style lang="less" scoped>
#main {
  background-color: whitesmoke;
  display: block;
  position: relative;
  height: 100%;
  .login{
    width: 100%;
    height: 100%;
    background-color: #c8c8c8;
   
    .welcome {
    width: 100%;
    height: 100%;
    background-image: url(../../images/logo1.jpeg);
    background-repeat: no-repeat;
    background-size:100% 100%;
    .icon {
      display: block;
      // margin: 16vh auto 0;
      width: 180px;
      height: 80px;
      // background: url(../../images/wel-icon.png) center center / 100% 100% no-repeat;
    }
    > span {
      display: block;
      padding: 30px 0;
      font-size: 1.875rem;
      color: yellow;
      text-align: center;
    }
  }
  > #inp {
    background: color #c8c8c8;;
    height: 100%-40px;
    margin: auto;
    padding-top: 40px;
    //   margin-left: 36px;
    width: 370px;
    height: 260px;
    img{
      width: 100%;
      height: 100px;
    }
    > .inp1 {
      height: 30px;
      width: 270px;
      margin: 13px;
      margin-left: 56px;
      text-indent: 1em;
      background-color: #c8c8c8;
      //  border-radius: 10px;
      border-left: none;
      border-top: none;
      border-right: none;
      border-bottom: 1px solid #999999;
    }
    .checkb {
      margin-left: 60px;
      margin-top: 5px;
    }
    .loginBtn {
      height: 45px;
      width: 270px;
      margin: 13px;
      margin-left: 57px;
      border: none;
      background: #5e5cff;
      border-radius: 20px;
      font-size: 20px;
    }}
  }
  .rgt {
    margin-left: 250px;
  }
}
</style>